<template>
  <div class="goods-snapshot-comp">
    <el-drawer
      direction="rtl"
      size="40%"
      title="商品快照"
      :visible.sync="visible"
      :before-close="closeDialog"
    >
      <div v-if="goodsData" style="margin: 30px">
        <div class="label-content-wrap">
          <div class="labels">商品图片：</div>
          <div>
            <img
              style="width: 100px; height: 100px; margin-right: 20px"
              v-for="(imgSrc, index) in goodsData.picUrls"
              :src="imgSrc"
              alt=""
              :key="index"
            />
          </div>
        </div>

        <el-descriptions :column="1" size="medium">
          <!-- <el-descriptions-item label="商品封面">
            <img :src="goodsData.picUrl" alt="" />
          </el-descriptions-item> -->
          <el-descriptions-item label="订单ID">
            {{ goodsData.orderId }}
          </el-descriptions-item>

          <el-descriptions-item label="商品名称">
            {{ goodsData.name }}
          </el-descriptions-item>
          <el-descriptions-item label="商品副标题" class="lableClass">
            {{ goodsData.introduction }}
          </el-descriptions-item>
          <!--<el-descriptions-item label="售价">
            <span v-if="goodsData.priceUp == goodsData.priceDown">{{
              goodsData.priceDown
            }}</span>
            <span v-else>
              {{ goodsData.priceDown }} -
              {{ goodsData.priceUp }}
            </span>
          </el-descriptions-item>-->
          <el-descriptions-item label="ANDROID销售价格" >
            {{ goodsData.androidSalesPrice }}
          </el-descriptions-item>
          <el-descriptions-item label="IOS销售价格" >
            {{ goodsData.iosSalesPrice }}
          </el-descriptions-item>
          <el-descriptions-item label="TOB销售价格" >
            {{ goodsData.tobSalesPrice }}
          </el-descriptions-item>
          <el-descriptions-item label="市场价">
            {{ goodsData.marketPrice }}
          </el-descriptions-item>
          <el-descriptions-item label="规格类型">
               <el-tag
                :type="goodsData.specType == '0' ? 'success' : 'danger' "
               >{{ goodsData.specType == '0' ? '统一规格' : '单规格' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="车系">
            {{ goodsData.series }}
          </el-descriptions-item>
          <el-descriptions-item label="适配车型">
            {{ goodsData.modelName ? goodsData.modelName.join(",") : "" }}
          </el-descriptions-item>
          <el-descriptions-item label="车型代码">
            {{ goodsData.modelCode ? goodsData.modelCode.join(",") : "" }}
          </el-descriptions-item>
          <el-descriptions-item label="是否支持退款" >
            <el-tag
                :type="goodsData.isSupportRefund == '0' ? 'danger' : 'success' "
               >{{ goodsData.isSupportRefund == '0' ? '不支持' : '支持' }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <div class="label-content-wrap" style="height:500px;">
          <div class="labels">商品详情：</div>
          <editor :readOnly="true" v-model="goodsData.description" style="height:400px;"/>
        </div>
        <div class="label-content-wrap" style="height:500px;">
          <div class="labels">使用须知：</div>
          <editor :readOnly="true" v-model="goodsData.usageNotice" style="height:400px;"/>
        </div>

        <div class="label-content-wrap" style="height:500px;">
          <div class="labels">商品卖点：</div>
          <editor :readOnly="true" v-model="goodsData.sellPoint" style="height:400px;"/>
        </div>
      </div>
      <div v-else style="margin: 30px">抱歉，没有找到商品快照</div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: "goods-snapshot-comp",
  components: {},
  model: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    goodsData: {
      require: true,
    },
  },
  computed: {},
  watch: {},
  data() {
    return {
      // visible: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    closeDialog() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.goods-snapshot-comp {
  .label-content-wrap {
    padding-bottom: 10px;
    font-size: 14px;
    color: #606266;
    display: flex;
    .labels {
      margin-right: 10px;
      min-width:70px;
    }
    .labels-content {
      flex: 1;
      margin-top:-14px;
    }
  }
}

</style>
